import { memo, useState, useEffect } from 'react';
import { Space, Tag } from 'antd-mobile';
import { BankcardOutline } from 'antd-mobile-icons';
import * as dayjs from 'dayjs';
import classNames from 'classnames';
import axios from 'axios';
import { CARD_STATUS, DAY_FORMAT } from '@/utils/constants';
import style from './index.module.less';

export const MyCard = () => {
  const [state, setState] = useState([]); // 消费卡

  const myCard = async () => {
    const { data } = await axios.get(`http://127.0.0.1:3000/getMyCard?id=${localStorage.getItem('StudentID')}`);
    setState(data.data);
  };
  useEffect(() => {
    myCard();
  }, []);

  // const [data] = useState([
  //   {
  //     id: 1,
  //     residueTime: "10",
  //     endTime: new Date(),
  //     status:'VALID',
  //     card: {
  //       name: "周写作冲刺班",
  //       type: "time",
  //     },
  //     org: {//门店信息
  //       name:'门店名称1'
  //     }
  //   },
  //   {
  //     id: 2,
  //     residueTime: "5",
  //     endTime: new Date(),
  //     status:'DEPLETE',
  //     card: {
  //       name: "周写作冲刺班2",
  //       type: "duration",
  //     },
  //     org: {
  //       name:'门店名称2'
  //     }
  //   },
  //   {
  //     id: 3,
  //     residueTime: "1",
  //     endTime: new Date(),
  //     status:'EXPIRED',
  //     card: {
  //       name: "周写作冲刺班3",
  //       type: "time",
  //     },
  //     org: {
  //       name:'门店名称3'
  //     }
  //   },
  //   {
  //     id: 4,
  //     residueTime: "2",
  //     endTime: new Date(),
  //     status:'VALID',
  //     card: {
  //       name: "周写作冲刺班4",
  //       type: "duration",
  //     },
  //     org: {
  //       name:'门店名称4'
  //     }
  //   },
  // ]);
  return (
    <div className={style.container}>
      {state?.map((item:any, idx) => (
        <div
          key={idx}
          className={classNames({
            [style.itemContainer]: true, // 默认样式
            [style.expired]: item.status === CARD_STATUS.EXPIRED, // 过期
            [style.deplete]: item.status === CARD_STATUS.DEPLETE, // 耗尽
          })}
        >
          <Space justify="between" className={style.top}>
            <span>
              <BankcardOutline />
              <span className={style.name}>{item.desc}</span>
            </span>
            {item.type === 'duration' && (
              <Tag color="#fff" fill="outline">
                {item.name}
                (余
                {1}
                次)
              </Tag>
            )}
            {item.type === 'time' && (
              <Tag color="warning" fill="outline">
                {item.name}
                (余
                {item.validityDay}
                小时)
              </Tag>
            )}
          </Space>

          <Space justify="between" className={style.bottom}>
            <span>{item.orgName}</span>
            <span>
              有效期到：
              {dayjs(item.validityDay).format(DAY_FORMAT)}
            </span>
          </Space>

        </div>
      ))}
    </div>
  );
};

export default memo(MyCard);
